<template>
  <!--导航栏-->
  <div class="navbar" id="navbar">
    <div class="container">
      <!--导航-->
      <div class="nav">
        <el-menu :default-active="activeIndex" mode="horizontal" background-color="none" text-color="#000"
                 active-text-color="#f8558b" router style="display: block">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/wuxia">排行榜</el-menu-item>
          <el-menu-item index="/fantasy">猜你喜欢</el-menu-item>
          <el-menu-item index="/history">推荐电影</el-menu-item>

        </el-menu>
      </div>

      <!--搜索框-->
<!--      <div class="search">-->
<!--        <el-input v-model="keyword" placeholder="请输入搜索关键词"></el-input>-->
<!--        <el-button type="primary" @click="search">搜索</el-button>-->
<!--      </div>-->

      <!--用户设置-->
      <div class="user">
        <img class="avatar" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="头像"/>
        <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-submenu index="2">
            <el-menu-item index="2-1"><i class="el-icon-user"></i>个人中心</el-menu-item>
<!--            <el-menu-item index="2-2" @click="collect"><i class="el-icon-star-off"></i>我的收藏</el-menu-item>-->
            <el-menu-item index="2-3" @click="exit"><i class="el-icon-switch-button"></i>注销</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "/",
      username: localStorage.getItem("username"),
      keyword: '', // 存储用户输入的搜索关键词
    };
  },
  methods: {
    // 查询用户收藏接口
    collect() {
      this.$router.push({
        path: '/collect',
      })
    },
    handleSelect(){},
    // 注销接口
    exit() {
      localStorage.removeItem("token")
      localStorage.removeItem("username")
      this.$router.push({
        path: '/login',
      })
    },
    // 搜索功能接口
    search() {
      // 将搜索关键词传递给父组件
      this.$router.push({
        path: '/search',
        query: {value: this.keyword}
      });
    },
  }
}

window.onload = function () {
  // 获取页面滚动位置
  function getScrollPosition() {
    return window.pageYOffset || document.documentElement.scrollTop;
  }

  // 获取导航栏元素
  var navbar = document.querySelector('#navbar');

  // 检测滚动位置的变化
  window.addEventListener('scroll', function () {
    var currentScrollPos = getScrollPosition();

    if (currentScrollPos > 0) {
      navbar.classList.add('body-scrolled');
    } else {
      navbar.classList.remove('body-scrolled');
    }
  });
};
</script>

<style>
.avatar {
  width: 50px;
  margin: 5px 0;
  border-radius: 50%;
}

.user {
  display: flex;
}

.container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 导航栏的样式 */
#navbar {
  position: fixed; /* 导航栏总是位于顶部 */
  width: 100%; /* 宽度为全屏 */
  height: 60px; /* 高度为60px */
  background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
  z-index: 9999; /* 在所有元素之上 */
  top: 0; /* 已经处于顶部 */
  left: 0;
  transition: .5s;
}

/* 当滚动位置变化时导航栏的样式 */
.body-scrolled {
  background-color: white !important; /* 不透明背景 */
}

.el-menu {
  margin: 0 auto !important;
  border-bottom: none !important;
  background-color: transparent !important;
}

.nav .el-menu-item {
  font-size: 16px !important;
  background-color: unset !important;
}

.user .el-menu-item {
  font-size: 16px !important;
  background-color: white !important;
}

.el-submenu__title {
  font-size: 16px !important;
  color: #000 !important;
  background-color: transparent !important;
}

.search {
  width: 360px;
  display: flex;
  justify-content: space-between;
}

</style>
